<template>
  <view>
    <view class="logo-box text-center">
      <image src="/static/logo.png" class="logo-box-img radius-20" />
      <view class="flex justify-center logo-box-agree">
        <u-checkbox v-model="checked" shape="circle" active-color="#69BE87" />
        <view class="text-green">
          <text class="text-999">我已阅读并同意</text>
          <text @click.native="handleAge(2)">《用户协议》</text>
          <text class="text-999">和</text>
          <text @click.native="handleAge(1)">《隐私协议》</text>
        </view>
      </view>
      <view class="logo-box-btn margin-top-lg">
        <u-button size="default" :custom-style="commonBtn" hover-class="none" :disabled="isDisabled"
          @click="handleLogin">
          <image src="/static/icon3.png" class="wx-img margin-right" />
          一键登录
        </u-button>
      </view>
      <view class="user" @click="toLawyerLogin">我是客服</view>
      <view class="user" @click="toLawyerLogin">我是律师</view>
    </view>
    <u-popup v-model="show" mode="bottom" :mask-close-able="false">
      <view class="userInfo">
        <view class="userInfo-tp">
          <image class="userInfo-tp-img" src="../../static/logo.png" mode=""></image>
          <text class="userInfo-tp-txt">法律咨询 申请</text>
        </view>
        <view class="title" style="color: red;">请点击获取您的昵称头像</view>
        <view class="desc">提供具有辨识度的用户中心界面</view>
        <view class="myInfo_item">
          <view class="flTxt">头像</view>
          <view class="flex align-center btns">
            <button class="reset_button" open-type="chooseAvatar" @chooseavatar="chooseavatar">
              <image class="avatar" :src="info.avatar || '../../static/moren.png'"></image>
            </button>
          </view>
        </view>
        <view class="myInfo_item">
          <view class="flTxt">昵称</view>
          <view class="flex align-center" style="flex: 1">
            <input class="inputClass" v-model="info.nickname" type="nickname" bindblur="getNickname" />
          </view>
        </view>
        <view class="saveBtn-warp">
          <view v-if="!isFlag" class="saveBtn" @click="handleClick"> 保存 </view>
          <view v-if="isFlag" class="activeClass" @click="handleSave"> 保存 </view>
          <!-- <view class="activeClass" @click="handleSave"> 保存 </view> -->
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    commonBtn,
  } from "@/utils/common.js"
  import weixinlogin from "@/utils/login.js"
  export default {
    data() {
      return {
        isDisabled: false,
        commonBtn,
        checked: false,
        show: false,
        info: {
          // avatar: "https://flzx.nanjingyunpeng.cn/uploads/20240715/65543d0faa0a992b1717657c41a4be5b.jpeg",
          // nickname: "王超"
          avatar: "",
          nickname: ""
        }
      };
    },
    computed: {
      isFlag() {
        if (this.info.avatar && this.info.nickname) {
          return true
        } else {
          return false
        }
      }
    },
    onShow() {
      let token = uni.getStorageSync('token');
      if (token) {
        this.getUserInfo();
      }
    },
    methods: {
      getUserInfo() {
        this.$u.api._myIndex().then(res => {
          let group_id = res.data.group_id;
          if (group_id == 0) {
            uni.reLaunch({
              url: "/pages/index/index"
            })
          } else {
            uni.reLaunch({
              url: '/pages/conversations/conversations?group_id=' +
                group_id
            })
          }
        })
      },
      toLawyerLogin() {
        uni.navigateTo({
          url: "/pages/lawyer-login/lawyer-login"
        })
      },
      handleAge(index) {
        uni.navigateTo({
          url: `/pages/my/about-us?type=${index}`
        })
      },
      handleSave() {
        this.$u.api._profile(this.info).then(res => {
          this.$u.toast('登录成功');
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/index/index"
            })
          }, 1500)
        })
      },
      chooseavatar(e) {
        console.log("获取默认头像", e);
        uni.uploadFile({
          filePath: e.detail.avatarUrl,
          name: 'file',
          url: 'https://flzx.nanjingyunpeng.cn/api/common/upload', //接口地址
          header: {
            token: uni.getStorageSync('token')
          },
          success: (uploadFileRes) => {
            console.log("接口地址", JSON.parse(uploadFileRes.data));
            let res = JSON.parse(uploadFileRes.data);
            this.info.avatar = res.data.fullurl;
          }
        });
      },
      getNickname(e) {
        this.info.nickname = e.detail.value;
      },
      handleClick() {
        uni.showToast({
          title: "请选择头像昵称",
          duration: 1500,
          icon: "error"
        })
      },
      async handleLogin() {
        if (this.checked) {
          let oCode = await weixinlogin();
          this.$u.api._getOpenid({
            code: oCode
          }).then(res => {
            let openid = res.data.openid;
            this.$u.api._OtherLogin({
              openid
            }).then(resd => {
              this.isDisabled = true;
              // 客服团队信息
              let team = {
                id: '007',
                avatar: "/static/logo.png",
                name: '星沐泞咨询'
              }
              uni.setStorageSync('team', team);
              uni.setStorageSync('token', resd.data.token);
              uni.setStorageSync('tabBarIndex', 0);
              uni.setStorageSync('userinfo', resd.data);
              uni.setStorageSync('group_id', resd.data.group_id);
              if (resd.data.nickname) {
                this.$u.toast('登录成功');
                setTimeout(() => {
                  uni.reLaunch({
                    url: "/pages/index/index"
                  })
                }, 1500)
              } else {
                this.show = true;
              }
            })
          })
        } else {
          uni.showToast({
            title: "请勾选协议",
            duration: 1500,
            icon: "error"
          })
        }
      },
    }
  }
</script>
<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .user {
    margin-top: 20rpx;
    text-align: right;
    padding: 0 70rpx;
    box-sizing: border-box;
    text-decoration: underline;
  }

  .saveBtn-warp {
    display: flex;
    justify-content: center;

    .activeClass {
      width: 337rpx;
      height: 72rpx;
      background: #07C160;
      border-radius: 8rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #fff;
      text-align: center;
      line-height: 72rpx;
      margin-top: 72rpx;
    }

    .saveBtn {
      width: 337rpx;
      height: 72rpx;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 8rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #cccccc;
      text-align: center;
      line-height: 72rpx;
      margin-top: 72rpx;
    }
  }

  .reset_button {
    padding: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    background-color: transparent;
    color: inherit;
  }

  .reset_button::after {
    border: none;
  }

  .avatar {
    width: 76rpx;
    height: 76rpx;
    border-radius: 50%;
    vertical-align: middle;
  }

  .myInfo_item {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #f9f9f9;

    .flTxt {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.9);
      margin-right: 84rpx;
    }
  }

  .userInfo {
    padding: 36rpx 44rpx;
    box-sizing: border-box;

    .userInfo-tp {
      position: relative;
      display: flex;
      align-items: center;

      .userInfo-tp-img {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
      }

      .userInfo-tp-txt {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
        margin-left: 10rpx;
      }
    }

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #000000;
      margin-top: 32rpx;
    }

    .desc {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #aaaaaa;
      margin-top: 8rpx;
    }
  }

  .logo-box {
    margin-top: 120rpx;

    &-img {
      width: 176rpx;
      height: 176rpx;
    }

    .wx-img {
      width: 52rpx;
      height: 52rpx;
    }

    &-agree {
      padding-top: 220rpx;
    }
  }

  .role {
    width: 200rpx;
    margin-left: auto;
  }
</style>